<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
    <title>$i18n{tabListTitle}</title>
    <style>
      html {
        --google-grey-50-rgb: 248, 249, 250;
        --google-grey-200-rgb: 232, 234, 237;
        --google-grey-300-rgb: 218, 220, 224;
        --google-grey-800-rgb: 60, 64, 67;
        --google-grey-900-rgb: 32, 33, 36;
        --google-blue-300-rgb: 138, 180, 248;
        --google-blue-500-rgb: 66, 133, 244;

        --tabstrip-background-color: $i18n{frameColor};
        --tabstrip-tab-border-radius: 8px;
        --tabstrip-tab-active-border-color: rgb(var(--google-blue-500-rgb));

        overflow: hidden;
      }

      body {
        background: var(--tabstrip-background-color);
        height: 100%;
        margin: 0;
        overflow: hidden;
        padding: 0;
        width: 100%;
      }

<if expr="not chromeos">
      /* ChromeOS is the only platform that can be guaranteed to have overlay
       * scrollbars, so override the styles of native scrollbars for other
       * platforms. */
      html ::-webkit-scrollbar {
        display: block;
        height: 4px;
      }

      ::-webkit-scrollbar-track,
      ::-webkit-scrollbar,
      ::-webkit-scrollbar-track-piece {
        background: var(--tabstrip-background-color);
      }

      ::-webkit-scrollbar {
        display: none;
      }

      ::-webkit-scrollbar-thumb {
        background: rgba(var(--tabstrip-scrollbar-thumb-color-rgb), .7);
        border-inline-end: solid 16px var(--tabstrip-background-color);
        border-inline-start: solid 16px var(--tabstrip-background-color);
      }
</if>
    </style>
  </head>
  <body>
    <!--
        The CSS variables defined inside of TabList's style tag are also
        made available through TabList's class object in JavaScript.
    -->
    <tabstrip-tab-list role="tablist">
    </tabstrip-tab-list>
    <script src="tab_list.js" type="module"></script>
  </body>
</html>
